<%@ page session="false" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>

<html>
	<head>
		<title>Create Account</title>
		<link rel="stylesheet" href="<c:url value="/styles/blueprint/screen.css" />" type="text/css" media="screen, projection">
		<link rel="stylesheet" href="<c:url value="/styles/blueprint/print.css" />" type="text/css" media="print">
		<!--[if lt IE 8]>
			<link rel="stylesheet" href="<c:url value="/styles/blueprint/ie.css" />" type="text/css" media="screen, projection">
		<![endif]-->
		<link rel="stylesheet" href="<c:url value="/styles/blueprint/print.css" />" type="text/css" media="print">
		<link rel="stylesheet" href="<c:url value="/styles/popup.css" />" type="text/css" media="screen, projection">
		<link rel="stylesheet" href="<c:url value="/styles/jquery-ui-1.8.5.custom.css" />" type="text/css" >
		<link rel="stylesheet" href="<c:url value="/styles/reset.css" />" type="text/css" >
		<script type="text/javascript" src="<c:url value="/scripts/jquery-1.4.min.js" /> "></script>
		<script type="text/javascript" src="<c:url value="/scripts/jquery.scrollTo-1.4.2-min.js" /> "></script>
		<script type="text/javascript" src="<c:url value="/scripts/json.min.js" /> "></script>
		<script type="text/javascript" src="<c:url value="/scripts/jquery-ui-1.8.5.custom.min.js" /> "></script>
		<script type="text/javascript" src="<c:url value="/scripts/custom.js" /> "></script>
		<style>
			.ui-autocomplete {
				max-height: 100px;
				overflow-y: auto;
			}
		
			.red{color: red;}
			.blue{color: blue;}
			#popup > p {color: green;} /* only first-	level descendants*/
		</style>
	</head>
	<body>
		<!-- <button id='changeColor' class='red'>make red/blue</button>
		<button id='hide' style='display: block;'>hide/unhide</button>
		<button id='forClick' style='display: block;'>click</button>
		<div id='toHide'>text to hide</div>
		<button id='forHide' style='display: block;'>Hide</button>
		<button id='forFadeIn' style='display: block;'>Fade in</button>
		<div id='fadded' style="display: none">fadden</div>-->
		<div id='allAccounts' style="float: left">
			<div id="accordionResizer" 
				style="padding:10px; width:350px; height:420px;" 
				class="ui-widget-content">
				<div id="accordion">
				</div>
			</div>
		</div>
		<div class="container" style="width: 30%">
			<h1>
				Create Account
			</h1>
			<div class="span-12 last">	
				<form:form modelAttribute="account" action="account" method="post">
				  	<fieldset>		
						<legend>Account Fields</legend>
						<p>
							<form:label	id="nameLabel" for="name" path="name" cssErrorClass="error">Name</form:label><br/>
							<form:input path="name" /><form:errors path="name" />
						</p>
						<p>	
							<form:label for="balance" path="balance" cssErrorClass="error">Balance</form:label><br/>
							<form:input path="balance" /><form:errors path="balance" />
						</p>
						<p>
							<form:label for="location" path="location" cssErrorClass="error">Your city</form:label><br/>
							<form:input path="location" id='city'/><form:errors path="location" />
						</p>
						<p>	
							<form:label for="renewalDate" path="renewalDate" cssErrorClass="error">Renewal Date</form:label><br/>
							<form:input path="renewalDate" id="datepicker"/><form:errors path="renewalDate" />
						</p>
						<p>	
							<input id="create" type="submit" value="Create" />
						</p>
					</fieldset>
				</form:form>
			</div>
			<hr>	
			<ul>
				<li> <a href="?locale=en_us">us</a> |  <a href="?locale=en_gb">gb</a> | <a href="?locale=es_es">es</a> | <a href="?locale=de_de">de</a> </li>
			</ul>	
		</div>
		<div id="mask" style="display: none;"></div>
		<div id="popup" style="display: none;">
			<div class="span-8 last">
				<h3>Account Created Successfully</h3>
				<form>
					<fieldset>
						<p>
							<label for="assignedId">Assigned Id</label><br/>
							<input id="assignedId" type="text" readonly="readonly" />		
						</p>
						<p>
							<label for="confirmedName">Name</label><br/>
							<input id="confirmedName" type="text" readonly="readonly" />
						</p>
						<p>	
							<label for="confirmedBalance">Balance</label><br/>
							<input id="confirmedBalance" type="text" readonly="readonly" />
						</p>
						<p>	
							<label for="confirmedRenewalDate">Renewal Date</label><br/>
							<input id="confirmedRenewalDate" type="text" readonly="readonly" />
						</p>
					</fieldset>
				</form>
				<a href="#" onclick="closePopup();">Close</a>			
			</div>			
		</div>
		<div id='toScroll' style='margin-top: 400px;'>here</div>		
	</body>
</html>
